<template>
    <div class="u-table">
        <div class="hidden-columns" ref="hiddenColumns">
            <slot></slot>
        </div>
        <div class="u-table_header">
            <table class="el-table__header">
                <colgroup>
                    <col v-for="item in columns" :key="item.id" :name="item.id " />
                </colgroup>
                <thead>
                    <tr>
                        <th v-for="item in columns" :key="item.id" :class="item.className">
                            {{item.label}}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="u-table_body">
            <table>
                <colgroup>
                    <col v-for="item in columns" :key="item.id" :name="item.id " />
                </colgroup>
                
            <table-body :store="store"></table-body>
                <!-- <tbody>       
                    <tr v-for="(row, index) in data" :key="index">
                        <td v-for="column in columns" :key="column.id" :class="column.className" v-html="column.renderCell(index,row,column)"></td>
                    </tr>
                </tbody> -->
            </table>
        </div>
    </div>
</template>
<script>
import TableStore from './table-store';
import TableBody from './table-body';
let tableIdSeed = 1
export default {
    name: 'UTable',
    componentName: 'UTable',
    inheritAttrs: false, 
    components: {
        TableBody,
    },
    props: {
        data: {
            type: Array,
            default: []
        },
    },
    data() {
        const store = new TableStore(this);
        return {    
            store,
        }
    }, 
    watch: {
        data: {
            immediate: true,
            handler(value) {
                // 供 table-body computed.data 使用
                this.store.commit('setData', value);
            }
        },
    }, 
    computed: {
        columns() {
            // 在table.vue mounted阶段会更新columns
            // 如果当表格渲染完成再动态添加列,table-column 在 mounted阶段也会更新columns
            return this.store.states.columns?this.store.states.columns:[];
        },
    },
    created() {
        this.tableId = `u-table${tableIdSeed}`;
        tableIdSeed += 1;
    },
    mounted() {
        this.store.updateColumns();
    },
    updated(){
        this.onColumnsChange()
        
    },
    methods: {
        onColumnsChange() {
            if(!this.$el) return false;
            const cols = this.$el.querySelectorAll('colgroup > col');
            const bodyWidth = this.$el.clientWidth;
        
            if (!cols.length) return;
            const columnsMap = {};
            this.columns.forEach((column) => {
                columnsMap[column.id] = column;
            });

            const allColumnsWidth_real = this.columns.reduce((prev, column) => prev + (column.realWidth || 0), 0);
            const allColumnsWidth_min = this.columns.reduce((prev, column) => prev + (column.realWidth? 0: 80), 0);
            const flexWidthPerPixel = (bodyWidth-allColumnsWidth_real) / allColumnsWidth_min;
            let noneFirstWidth = 0;

            this.columns.forEach((column, index) => {
                if(column.realWidth) return false

                const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);
                noneFirstWidth += flexWidth;
                column.realWidth = flexWidth;
            });
            for (let i = 0, j = cols.length; i < j; i++) {
                const col = cols[i];
                const name = col.getAttribute('name');
                const column = columnsMap[name];
                if (column) {
                    col.setAttribute('width', column.realWidth || column.width);
                }
            }


        },
    }
};
</script>
<style lang="scss" scoped>
.u-table{
    width: 100%; height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .u-table_body{
        flex: 1;
        overflow: auto;
    }
    table{
        table-layout:fixed;
        colgroup{
            width: 100%;
        }
    }
}
</style>